<template>
    <div>
        <a-tabs type="card" v-model="state">
            <a-tab-pane key="1" tab="已审核"></a-tab-pane>
            <a-tab-pane key="0" tab="待审核"></a-tab-pane>
        </a-tabs>
        <a-card>
          <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
              <a-row :gutter="24">
                <a-col :md="6" :sm="12">
                  <a-form-item label="标题">
                    <a-input placeholder="请输入标题" v-model="queryParam.contentTitle"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-item label="关键词">
                    <a-input placeholder="请输入内容关键词（查询创建人名称，手机号信息）" v-model="queryParam.keyWords"></a-input>
                  </a-form-item>
                </a-col>
                <!-- <a-col :md="6" :sm="12">
                  <a-form-item label="创建人">
                    <a-input placeholder="请输入创建人" v-model="queryParam.creat"></a-input>
                  </a-form-item>
                </a-col> -->
                <a-col :md="6" :sm="8">
                  <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                    <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                    <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <a-table
            ref="table"
            bordered
            size="middle"
            rowKey="contentTitle"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            @change="loadData">
            <!-- <div slot="img" slot-scope="text, record">
              <img class="item-icon" style="margin: 0 auto" :src="record.mbLogoUrl||record.pcLogoUrl||defaultImg">
            </div> -->
            <span slot="contentType" slot-scope="text, record">
              {{getContentTypeName(record.contentType)}}
            </span>
            <span slot="action" slot-scope="text, record">
              <a @click="look(record)">查看</a>
              <a-divider type="vertical" v-if="state == 0" />
              <a v-if="state == 0" @click="audit(record.workflowId)">审核</a>
            </span>
          </a-table>
        </a-card>
        <!-- <a-spin :spinning="loading">
            <a-empty v-if="!loading && ipagination.total==0"></a-empty>
            <div class="item" v-for="(item,index) in dataSource" :key="index">
                <div class="item-title">{{item.contentTitle}}</div>
                <div class="item-content">
                    <img class="item-icon" :src="item.mbLogoUrl||item.pcLogoUrl||defaultImg">
                    <div style="flex:1">
                        <div class="item-content-title">{{item.contentSubTitle||'暂无副标题'}}</div>
                        <a-row type="flex">
                            <a-col flex="70px">任务类型</a-col>
                            <a-col>{{getContentTypeName(item.contentType)}}</a-col>
                        </a-row>
                        <a-row type="flex">
                            <a-col flex="70px">主题名称</a-col>
                            <a-col>{{item.themeName||'无'}}</a-col>
                        </a-row>
                        <a-row type="flex">
                            <a-col flex="70px">创建时间</a-col>
                            <a-col>{{item.createTime}}</a-col>
                        </a-row>
                        <a-row type="flex" :gutter="8">
                            <a-col>
                                <a-button size="small" type="primary" @click="look(item)">查看
                                    <a-icon type="eye"/>
                                </a-button>
                            </a-col>
                            <a-col v-if="state == 0">
                                <a-button size="small" type="primary" @click="audit(item)">审核
                                    <a-icon type="audit" />
                                </a-button>
                            </a-col>
                        </a-row>
                    </div>
                </div>
            </div>
            <a-pagination style="text-align: center;" @change="loadData" v-model="ipagination.current"
                          :total="ipagination.total"></a-pagination>
        </a-spin> -->
        <preview-with-content-info v-if="showDetail" :visible.sync="showDetail"
                                   :content-info="currentItem"></preview-with-content-info>
    </div>
</template>

<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { findContentType } from '@/utils/xinkeUtil'
  import PreviewWithContentInfo from '@/components/xinke/preview/PreviewWithContentInfo'
  import { postAction } from '@/api/manage'

  export default {
    name: 'ContentBankList',
    components: { PreviewWithContentInfo },
    mixins: [JeecgListMixin],
    data() {
      return {
        state:'1',
        defaultImg: require('@assets/default.png'),
        url: {
          list: 'task/taskInfo/conContentBankList'
        },
        showDetail: false,
        currentItem: null,
        queryParam: {},
        ipagination: {
          current: 1,
        },
        columns: [
          // {
          //   title: '封面',
          //   dataIndex: 'img',
          //   align: "center",
          //   scopedSlots: {customRender: 'img'},
          //   width:'200px'
          // },
          {
            title: '标题',
            dataIndex: 'contentTitle',
            align: "center",
          },
          {
            title: '副标题',
            dataIndex: 'contentSubTitle',
            align: "center",
            customRender(text, r, index) {
              return text || '暂无副标题'
            }
          },
          {
            title: '简介',
            dataIndex: 'contentIntroduce',
            align: "center",
            scopedSlots: {customRender: 'contentIntroduce'},
          },
         
          {
            title: '创建人',
            dataIndex: 'authorName',
            align: "center",
          },
          {
            title: '创建人信息',
            dataIndex: 'createBy',
            align: "center",
          },
          {
            title: '创建时间',
            dataIndex: 'createTime',
            align: "center",
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'},
            align: "center",
            width:'170px'
          }
        ],
      }
    },
    watch:{
      state:{
        immediate:true,
        handler(){
          this.queryParam = {};
          this.loadData();
        }
      }
    },
    created() {
    },
    methods: {
      tableChange(pag) {
        const pager = { ...this.ipagination };
        console.log(pager);
        console.log(pag.current);
        pager.current = pag.current;
        this.ipagination = pager;
        this.$nextTick(() => {
          this.loadData();
        })
      },
      loadData(){
        const params = {
          column: "createTime",
          order: "desc",
          pageNo: this.ipagination.current,
          pageSize: 10,
          state: this.state,
        };
        if (this.queryParam.contentTitle) {
          // 标题
          params.contentTitle = this.queryParam.contentTitle
        }
        if (this.queryParam.keyWords) {
          // 内容关键词
          params.keyWords = this.queryParam.keyWords
        }
        if (this.queryParam.create) {
          // 创建人
          params.create = this.queryParam.create
        }
        this.loading = true;
        postAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records||res.result;
            if(res.result.total)
            {
              this.ipagination.total = res.result.total;
            }else{
              this.ipagination.total = 0;
            }
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
          this.loading = false;
        })
      },
      getContentTypeName(contentType) {
        console.log(1111);
        const contentTypeItem = findContentType(contentType)
        if (contentTypeItem) {
          return contentTypeItem.name
        }
      },
      getQueryField() {
        return ''
      },
      //查看
      look(item) {
        this.currentItem = item;
        this.currentItem.taskId = item.taskNo;
        this.showDetail = true
      },
        // 审核
      async audit(item){
        const res = await postAction('task/taskInfo/auditContentBank',{id:item.id,state:1});
        if(res.success){
          this.loadData();
        }else{
          this.$message.error(res.message);
        }
      }
    }
  }
</script>

<style scoped lang="less">
    @import '~@assets/fonts/iconfont.css';

    .item {
        background-color: white;
        border-radius: 8px;
        padding: 20px 30px;
        margin: 10px 0;

        &-title {
            font-weight: 700;
            color: #333;
            font-size: 16px;
        }

        &-content {
            display: flex;
            font-size: 13px;
            align-items: center;

            &-title {
                font-size: 15px;
                line-height: 25px;
            }
        }

        &-content .ant-row-flex {
            margin: 5px 0;
        }

        &-icon {
            width: 180px;
            height: 120px;
            border-radius: 5px;
            border: 1px solid #ededed;
            margin-right: 20px;
        }
    }

    .printTitle {
        width: 100%;
        text-align: center;
        font-size: 18px;
        margin: 10px 0px;
        color: #333;
    }

    .printContent img {
        max-width: 100%;
    }

</style>
